<!DOCTYPE html>
<html lang="ch-zn">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0">
		<title>电表</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<article>
			<header>
				<!--drop-down 切换class：on，显示隐藏下拉列表-->
				<div id="drop-down" class="drop-down">
					<span>小时</span>
					<ul>
						<li>季度</li>
						<li>月</li>
						<li>周</li>
						<li>日</li>
						<li class="active">小时</li>
						<li>分钟</li>
					</ul>
				</div>
				<h1>电表</h1>
				<span class="icon-button icon icon-add"></span>
			</header>
			<section>
				<!--统计总数-->
				<div class="data">
					<!--默认显示耗电总数，可点击右上角按钮切换成总电费，后缀变成RMB-->
					<p class="sum">571448.6<span class="postfix">KWH</span></p>
					<p class="time">2017.09.20-2017.10.20 14时</p>
					<!--icon-button的class默认为money，点击之后变成degree-->
					<span class="icon-button money"></span>
				</div>
				<!--图表区-->
				<div class="chart-container">
					<img src="images/chart-l.png" alt="" style="width: 100%;">
				</div>
				<!--电表列表-->
				<ul class="ammeter-list">
					<li>
						<p class="sum">396.6<span class="postfix">KWH</span></p>
						<p class="location"><span class="icon icon-location"></span>车间B进门拐角</p>
						<div class="chart">
							<img src="images/chart-s-normal.png" alt="" style="width: 50%;">
						</div>
						<span class="status">正常</span>
					</li>
					<li>
						<p class="sum">396.6<span class="postfix">KWH</span></p>
						<p class="location"><span class="icon icon-location"></span>车间B进门拐角</p>
						<div class="chart">
							<img src="images/chart-s-normal.png" alt=""  style="width: 50%;">
						</div>
						<span class="status">正常</span>
					</li>
					<li>
						<p class="sum">396.6<span class="postfix">KWH</span></p>
						<p class="location"><span class="icon icon-location"></span>车间B进门拐角</p>
						<div class="chart">
							<img src="images/chart-s-normal.png" alt="" style="width: 50%;">
						</div>
						<span class="status">正常</span>
					</li>
					<!--异常：添加class: abnormal-->
					<li class="abnormal">
						<p class="sum">0000<span class="postfix">KWH</span></p>
						<p class="location"><span class="icon icon-location"></span>车间B进门拐角</p>
						<div class="chart">
							<img src="images/chart-s-normal.png" alt="" style="width: 50%;">
						</div>
						<span class="status">异常</span>
					</li>
				</ul>
			</section>
		</article>
		<script type="text/javascript">
			window.onload = function() {
				//头部下拉列表
				var dropDown = document.getElementById("drop-down");
				var span = dropDown.getElementsByTagName("span")[0];
				var ul = dropDown.getElementsByTagName("ul")[0];
				var lis = dropDown.getElementsByTagName("li");
				span.onclick = function() {
					dropDown.className = dropDown.className === "drop-down" ? "drop-down on" : "drop-down";
				}
				for(var i = 0; i < lis.length; i++) {
					lis[i].onclick = function() {
						for(var j = 0; j < lis.length; j++) {
							lis[j].className = "";
						}
						this.className = "active";
						span.innerHTML = this.innerHTML;
						dropDown.className = "drop-down";
					}
				}
			}
		</script>
	</body>
</html>